<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>Document</title>
    <style>
        #app {
            width: 800px;
            height: 500px;
            margin: 10px auto;
        }

        table {
            text-align: center;
            min-height: 300px;
            table-layout: fixed;

        }

        table span {
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table border="0px">
            <caption>{{title}}</caption>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>选择</th>
                    <th>名称</th>
                    <th>产品图</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in goods" :key="index">
                    <td>{{index+1}}</td>
                    <td><input type="checkbox" v-model="item.check"></td>
                    <td>{{item.title}}</td>
                    <td><img :src="imgSrc" alt="" style="max-width: 50px;"></td>
                    <td>{{item.price |fixed}}</td>
                    <td><button v-if="item.count>1" @click="item.count--">-</button><span>{{item.count}}</span>
                        <button @click="item.count++">+</button>
                    </td>
                    <td>{{item.price * item.count |fixed}}</td>
                    <td><button @click="changegood(index)">移除</button></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="checkbox" v-model="all">全选/反选</td>
                    <td><button @click="delcheck">删除选中</button></td>
                    <td>总数量:{{totalnum}}</td>
                    <td>总价格:{{totalprice}}</td>
                    <td></td>
                    <td>选中数量:{{checknum}}</td>
                    <td>选中总价:{{checkprice}}</td>
                    <td>结算</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
<script>
    Vue.filter('fixed', (value, n = 2) => {
        if (!value) return value
        return value.toFixed(n)
    })
    const vm = new Vue({
        el: "#app",
        data: {
            title: "v-model 快速实现购物车  ",
            goods: [
                { check: false, title: "上衣", price: 200, count: 1 },
                { check: true, title: "裤子", price: 100, count: 10 },
                { check: false, title: "鞋子", price: 500, count: 10 },
                { check: false, title: "风衣", price: 1000, count: 10 },
                { check: true, title: "帽子", price: 300, count: 10 },
                { check: true, title: "西服", price: 2000, count: 10 },
            ],
            imgSrc: 'http://47.104.209.44/base/imgs/1.jpg',
            // all: false,
            totalnum: 0,
            totalprice: 0,
            checknum: 0,
            checkprice: 0
        },
        methods: {
            changegood(n) {
                this.goods.splice(n, 1)
            },
            delcheck() {
                this.goods = this.goods.filter(item => {
                    return !item.check
                })
            }
        },
        computed: {
            all: {
                get() {
                    return this.goods.length > 0 && !this.goods.some(item => {
                        return item.check == false
                    })
                },
                set(v) {
                    this.goods.forEach(item => item.check = v)

                }
            }
        },
        mounted() {
            document.querySelector("title").innerHTML = this.title
            this.goods.forEach(item => {
                this.totalnum += item.count;
                this.totalprice += item.count * item.price;
                if (item.check) {
                    this.checknum += item.count;
                    this.checkprice += item.count * item.price;
                }
            })
        },
        watch: {
            goods: {
                deep: true,
                handler(v) {
                    this.totalnum = 0;
                    this.totalprice = 0;
                    this.checknum = 0;
                    this.checkprice = 0;
                    v.forEach(item => {
                        this.totalnum += item.count;
                        this.totalprice += item.count * item.price;
                        if (item.check) {
                            this.checknum += item.count;
                            this.checkprice += item.count * item.price;
                        }
                    })
                }
            }
        }
    })
</script>

</html>